<template>
  <el-row class="send_email_con_box">
    <el-col :span="16">
      <div class="send_email_con">
        <el-form :model="sendObj" ref="sendObj" :rules="rules" class="demo-dynamic" label-width="90px" :label-position="'right'">
          <div>
            <el-form-item :label="$t('email.recipient') + ':'" prop="to" class="form_item_box">
              <EmailSearch v-if="associationFlag" :size="'small'" :placeholder="$t('public.pleaseInput')" :dataArray="autoAssociationArray" @inputChange="toChange"></EmailSearch>
            </el-form-item>
            <el-form-item :label="$t('email.copyFor2') + ':'" class="form_item_box">
              <EmailSearch :size="'small'" :placeholder="$t('public.pleaseInput')" @inputChange="ccChange"></EmailSearch>
            </el-form-item>
            <el-form-item :label="$t('supplement.subject') + ':'" prop="subject" class="form_item_box">
              <el-input class="email_subject" v-model="sendObj.subject" :placeholder="$t('public.pleaseInput')"></el-input>
              <div class="attach_box">
                <div id="uploadEmailAttach" :class="(sendObj.attachment.length>0 && !copyBoxShow) ? 'click' : '' "  class="addAttach" >
                  <span class="iconfont icon-fujian"></span>
                  {{$t('email.addAttach')}}
                </div>
              </div>
              <div class="verification_ul">
                <div class="verification_li" v-for="(item, index) in sendObj.attachment" :key="item.name">
                  <span>{{item.name}}</span>
                  <span class="delete_email" @click="deleteAttach(index)">X</span>
                </div>
                <div class="attach_upload_progress clearfix" v-if="attachUpPro.flag">
                  <span class="progress_title">{{attachUpPro.progress}}%</span>
                  <div class="progress_img">
                    <span class="progress_img_span" :style="'width:' + attachUpPro.progress + '%'"></span>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
          <el-form-item :label="$t('supplement.text') + ':'">
            <div class="send_editor_box">
              <div id="send_email_editor_menu" class="send_editor_menu padding-top"></div>
              <div id="send_email_editor_content" class="unknown-question padding-top"></div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="send_btn_box">
        {{$t('config.channel.enterpriseEmailTitle')}}： 
        <el-select size="small" class="support_email_selet" filterable v-model="sendObj.from" :placeholder="$t('public.pleasePick')">
          <el-option
            v-for="item in supportEmails"
            :key="item.id"
            :label="item.email"
            :value="item.email">
          </el-option>
        </el-select>
        <el-button type="primary" class="replyMsg primary_btn" @click.stop="sendEmail('sendObj')" size="small">{{$t('email.send')}}</el-button>
        <span class="incidentalAgentInfo">
          <el-checkbox v-model.trim="sendObj.carryAgentInfo">{{$t('email.incidentalAgentInfo')}}</el-checkbox>
        </span>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="quickreplay_box">
        <div class="quickreplay_sys">
          <div class="quickBoxTit">
            {{$t('webchat.systemCommon')}}
          </div>
          <ul class="tree" v-if="sysQuickReply.length">
            <li class="quickReSys quickReSysIndex" v-for="(model, index) in sysQuickReply" :key="model._id">
              <div class="cursor_li sys_quick_li" @click.stop="itemToggle(index)" :index="index" :title="model.name">
                <span class="sys_quick_li_span"><i :class="open.index===index && open.isOn ? 'el-icon-minus' : 'el-icon-plus'"></i></span>
                <div class="cata-name ellipsis sys_quick_li_title">{{model.name}}</div>
              </div>
              <ul v-show="open.index === index && open.isOn === true" v-if="model.children && model.children.length" class="quick_re_sys_ul">
                <li class="quickReSys quickReLi ellipsis" v-for="item in model.children">
                  <span class="cata-name ellipsis">{{item.content}}</span>
                  <span class="quickReBox clearBoth">
                    <el-tooltip class="item" effect="dark" transition="" :content="$t('public.paste')" placement="top">
                      <i class="quickRe iconfont icon-fuzhi" @click.stop="quickCopyMsg(item.content)"></i>
                    </el-tooltip>
                  </span>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <!-- 自定义快捷回复-->
        <div class="quickreplay_custome_title">
          {{$t('webchat.customize')}}
          <el-tooltip class="item" effect="dark" transition="" :content="$t('public.edit2')" placement="top">
            <span class="edit_img iconfont icon-beizhu" @click.stop="showQuickReplyEditInput" v-show="custQuickReplyEditIsShow === true"></span>
          </el-tooltip>
        </div>
        <div class="quickreplay_custom">
          <ul class="quickreplay_custom_con" v-show="custQuickReplyEditIsShow">
            <li class="quickReLi ellipsis" v-for="(item, index) in customQuickReply.rdata">
              <span>{{item.value}}</span>
              <span class="quickReBox clearBoth">
                <el-tooltip class="item" effect="dark" transition="" :content="$t('public.paste')" placement="top">
                  <i class="quickRe iconfont icon-fuzhi" @click.stop="quickCopyMsg(item.value)"></i>
                </el-tooltip>
              </span>
            </li>
          </ul>
        </div>

        <div class="quickreplay_custom_edit" v-show="custQuickReplyEditIsShow === false">
            <el-form :model="editCustomQuickReply" ref="editCustomQuickReply" class="demo-dynamic">
              <el-button type="text" @click.stop="addQuickReplyItem" size="small" class="color el-icon-plus"></el-button>
              <el-form-item v-for="(domain, index) in editCustomQuickReply.rdata" class="quickreplay_li" :prop="'rdata.' + index + '.value'" :rules="{required: true, message: $t('email.quickReplayNotEmpty'), trigger: 'blur'}">
                <input type="text" class="quickreplay_custom_edit_input" v-model.trim="domain.value"/>
                <el-button class="edit_del el-icon-minus color" type="text" size="mini" @click.prevent="removeQuickReplyItem(domain)"></el-button>
              </el-form-item>
              <div class="button_box">
                <el-button @click.stop="custQuickReplySubmit()" class="primary_btn" size="small">{{$t('public.cancel')}}</el-button>
                <el-button @click.stop="custQuickReplySubmit(true)" class="primary_btn" type="primary" size="small">{{$t('public.save')}}</el-button>
              </div>
            </el-form>
          </div>
      </div>
    </el-col>
  </el-row>
</template>
<script type="text/javascript">
  import CustomerAvatar from '@/components/ui-modules/customer-avatar/CustomerAvatar'
  import { deepClone, formatTimestamp, getCache, filterXSS } from '@/utils/m7Utils'
  import * as types from '@/store/modules/email/mutation-types.js'
  import InputTag from '@/components/public-modules/input/InputTag'
  import EmailSearch from '@/components/public-modules/email-search'
  import AttachInputTag from './AttachInputTag'
  import {uploadTo7moorEmailDomain} from '@/utils/qiniuUtils'
  import EmailAttachment from './EmailAttachment'
  import { km } from '@/utils/cosUrl'
  import * as uuid from 'uuid'
  import emailDetails from './emailDetails.vue'
  import Editor from 'wangeditor'

  export default {
    name: 'SendEmailCon',
    data () {
      return {
        custQuickReplyEditIsShow: true,
        editCustomQuickReply: {},
        oldCustomQuickReply: {},
        attachUpPro: {
          flag: false,
          progress: ''
        },
        open: {
          index: -1,
          isOn: false
        },
        editor: {},
        modelShowCustomer:
        {
          content: ''
        },
        copyBoxShow: false,
        supportEmails: [],
        sendObj: {
          subject: '', // 主题
          to: [],    // 收件地址
          from: '',   // 代发送邮箱
          fromName: '',  //
          attachment: [], // 附件
          cc: [],       // 抄送
          content: '', // 内容
          contentText: '',     // 去掉html的内容
          carryAgentInfo: true, // 附带坐席信息
          agentFirstReplyTime: '',  // 坐席首次回复时间
          firstReplyTime: '',       //
          lastMailId: '',
          displayName: this.$store.state.session.user.displayName, // 坐席名称
          supportEmail: ''
        },
        rules: {
          subject: [
            { required: true, message: this.$t('supplement.SubjectMust'), trigger: 'blur' }
          ]
        },
        autoAssociationArray: [],
        associationFlag: false,
        m7uploaders: []
      }
    },
    computed: {
      sysQuickReply () {
        let arr = this.$store.getters.getSysQuickReplyForEmail || []
        let arrNew = deepClone(arr)
        return arrNew
      },
      customQuickReply () {
        return this.$store.getters.getCustomQuickReplyForEmail
      },
      sessionUserId () {
        return this.$store.state.session.user._id
      },
      emailDomain () {
        let mailInfo = this.$store.state.config.channelConfig.channelMail.mailInfo
        if (mailInfo.emailDomain && mailInfo.uname) {
          return mailInfo.uname + '@' + mailInfo.emailDomain
        } else {
          return ''
        }
      },
      attachmentMaxSize () {
        return this.$store.state.attachmentMaxSize
      }
    },
    methods: {
      sendEmail (formName) {
        let that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!that.sendObj.to.length) {
              that.$message.error(this.$t('public.pleaseInput') + this.$t('email.recipient'))
              return
            }
            if (!that.sendObj.from) {
              that.$message.error(this.$t('public.pleasePick') + this.$t('config.channel.enterpriseEmailTitle'))
              return
            }
            if (!that.sendObj.subject.trim()) {
              that.$confirm(this.$t('supplement.subjectTips'), this.$t('public.tip'), {
                confirmButtonText: this.$t('public.confirm'),
                cancelButtonText: this.$t('public.cancel'),
                type: 'warning'
              }).then(() => {
                that.sendEmailTodo()
              }).catch(() => {})
            } else {
              that.sendEmailTodo()
            }
          }
        })
      },
      sendEmailTodo () {
        let content = this.editor.txt.html().replace('<p>', '').replace('</p>', '').replace('<br>', '')
        if (new RegExp('<table border="0" width="100%" cellpadding="0" cellspacing="0">').test(content)) {
          content = content.replace(/<table border="0" width="100%" cellpadding="0" cellspacing="0">/g, '<table style="width:100%;" cellpadding="2" cellspacing="0" border="1" bordercolor="#262626">')
        }
        let text = this.editor.txt.text()
        this.sendObj.content = content
        this.sendObj.contentText = text
        this.sendObj.supportEmail = this.emailDomain
        this.$store.dispatch('agentSendMail', this.sendObj).then((res) => {
          if (res && res.success) {
            this.$message.success(this.$t('supplement.SendSuccess'))
            this.$router.push({path: '/index/email/'})
          } else {
            this.$message.error(this.$t('supplement.SendFail'))
          }
        })
      },
      toChange (data) {
        console.log(data)
        this.sendObj.to = data
      },
      ccChange (data) {
        console.log(data)
        this.sendObj.cc = data
      },
      initUploadEmailAttach () {
        let self = this
        let fileAdded = function (up, files) {
          console.log('fileAdd')
        }
        let beforeUpload = function (up, file) {
          console.log('beforeUpload1')
        }
        let uploadProgress = function (up, file) {
          self.attachUpPro.flag = true
          self.attachUpPro.progress = file.percent
        }
        let uploadComplete = function () {
          console.log('uploadComplete1')
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          let trueName = file.name
          self.sendObj.attachment.push({name: trueName, url: sourceLink})
          self.attachUpPro.flag = false
        }
        let error = function (up, err, errTip) {
          self.$message.error(errTip)
        }
        this.m7uploaders.push(
          uploadTo7moorEmailDomain(this.sessionUserId, 'uploadEmailAttach', {}, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, km.getUploadKey, this.attachmentMaxSize)
        )
      },
      initUploadImageFile () {
        let self = this
        let fileAdded = function (up, files) {
          console.log('fileAdd')
        }
        let beforeUpload = function (up, file) {
          console.log('beforeUpload1')
        }
        let uploadProgress = function (up, file) {
          console.log('uploadProgress1')
        }
        let uploadComplete = function () {
          console.log('uploadComplete1')
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          // self.editor.txt.append('<img src="' + sourceLink + '" alt="">')
          // 改为图片在光标出插入
          self.editor.cmd.do('insertHtml', filterXSS('<img src="' + sourceLink + '" style="max-width:100%;"/>'))
        }
        let error = function (up, err, errTip) {
          self.$message.error(errTip)
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,jpeg,gif,png,bmp'}
          ]
        }
        this.m7uploaders.push(
          uploadTo7moorEmailDomain(this.sessionUserId, 'w-e-img-icon', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, km.getUploadKey)
        )
      },

      // 快捷回复相关
      removeQuickReplyItem (item) {
        var index = this.editCustomQuickReply.rdata.indexOf(item)
        this.editCustomQuickReply.rdata.splice(index, 1)
      },
      addQuickReplyItem () {
        this.editCustomQuickReply.rdata.push({value: ''})
        this.$nextTick(function () {
          if (document.getElementsByClassName('quick_replay_box').length) {
            document.getElementsByClassName('quick_replay_box')[0].scrollTop = document.getElementsByClassName('quickreplay_box')[0].scrollHeight
          }
        })
      },
      showQuickReplyEditInput () {
        this.editCustomQuickReply = deepClone(this.customQuickReply)
        this.oldCustomQuickReply = deepClone(this.customQuickReply)
        this.custQuickReplyEditIsShow = false
        this.$nextTick(function () {
          if (document.getElementsByClassName('quick_replay_box').length) {
            document.getElementsByClassName('quick_replay_box')[0].scrollTop = document.getElementsByClassName('quickreplay_box')[0].scrollHeight
          }
        })
      },
      custQuickReplySubmit (flag) {
        let cloneData = deepClone(this.editCustomQuickReply) // 自定义快捷回复新设置数据克隆（经过数据验证之后获取不到新设置的数据）
        if (this.$refs.editCustomQuickReply.fields.length) {
          this.$refs.editCustomQuickReply.validate((valid) => {
            if (valid) {
              let vuexData = {}
              if (flag) {
                let arr = []
                this.editCustomQuickReply.rdata.forEach((item) => {
                  arr.push(item.value)
                })
                let data = {
                  quickreplys: arr,
                  moduleType: 'email'
                }
                this.$store.dispatch('saveQuickReply', data)
                vuexData = cloneData
              } else {
                vuexData = deepClone(this.oldCustomQuickReply)
              }
              this.$store.commit(types.SET_CUST_QUICK_REPLY, vuexData)
              this.custQuickReplyEditIsShow = true
            }
          })
        } else {
          if (flag) {
            let arr = []
            let data = {
              quickreplys: arr,
              moduleType: 'email'
            }
            this.$store.dispatch('saveQuickReply', data)
            this.$store.commit(types.SET_CUST_QUICK_REPLY, cloneData)
          }
          this.custQuickReplyEditIsShow = true
        }
      },
      quickCopyMsg (data) {
        let str = this.editor.txt.html()
        this.editor.txt.html(filterXSS(str + data))
      },
      itemToggle (index) {
        if (index === this.open.index) {
          this.open.isOn = !this.open.isOn
        } else {
          this.open.index = index
          this.open.isOn = true
        }
        if (!this.sysQuickReply[index].children) {
          let data = {
            id: this.sysQuickReply[index]._id,
            moduleType: 'email',
            index: index
          }
          this.$store.dispatch('queryEmailTagsById', data)
        }
      },
      initQuickReplay (tab) {
        if (!this.sysQuickReply.length) {
          doQuerySysQuickReplyList(this.$store, {'moduleType': 'email'})
        }
        if (!this.customQuickReply.rdata) {
          doQueryCustomQuickReplyList(this.$store, {'moduleType': 'email'})
        }
      },
      initSupportEmail () {
        let all = this.$store.state.config.channelConfig.channelMail.mailInfo.data
        if (all) {
          this.supportEmails = deepClone(all.emailRelate)
        } else {
          getMailStatus(this.$store, {}).then((res) => {
            this.supportEmails = res.data.emailRelate
          })
        }
      },
      // 工具类
      getTimeLength (lastEmailTimestamp, createTimeStamp) {
        return formatTimestamp(lastEmailTimestamp - createTimeStamp)
      },
      deleteAttach (index) {
        this.$confirm(this.$t('email.ifDeleteAttach'), this.$t('public.operate'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          if (index > -1) {
            this.sendObj.attachment.splice(index, 1)
          }
        }).catch(() => {})
      },
      im_icon (chatMsg) {
        let data = ''
        if (chatMsg.agent) {
          let agentInfo = getCache('agents', chatMsg.agent)
          if (agentInfo.im_icon) {
            data = agentInfo.im_icon + '?imageView2/1/w/50/h/50'
          }
        }
        return data
      },
      showForwardFun () {
        this.autoAssociationArray = []
        this.$store.dispatch('getMemoryRecipient', {}).then((res) => {
          if (res.success && res.data.length) {
            this.autoAssociationArray = deepClone(res.data)
          }
          this.associationFlag = true
        })
      },
      initEditor () {
        this.editor = new Editor('#send_email_editor_menu', '#send_email_editor_content')
        this.editor.config.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          // 'emoticon',  // 表情
          'table',  // 表格
          // 'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ]
        this.editor.config.pasteTextHandle = filterXSS
        this.editor.config.fontNames = [ '微软雅黑', '宋体', '新宋体', '仿宋', '楷体', '黑体', 'Arial', 'Arial Black', 'Times New Roman', 'Courier New', 'Tahoma', 'Verdana' ]
        this.editor.config.zIndex = 88
        let lang = window.langJson || {}
        let editLang = lang.wangeditor
        this.editor.config.lang = editLang
        this.editor.create()
        let div = document.createElement('div')
        div.className = 'w-e-menu'
        div.style.cssText = 'z-index:89;'
        let span = document.createElement('i')
        span.className = 'w-e-icon-image'
        span.id = 'w-e-img-icon'
        div.appendChild(span)
        document.getElementsByClassName('w-e-toolbar')[0].appendChild(div)
        this.initUploadImageFile()
      }
    },
    components: {
      CustomerAvatar,
      InputTag,
      AttachInputTag,
      EmailAttachment,
      emailDetails,
      EmailSearch
    },
    mounted () {
      this.initEditor()
      this.initUploadEmailAttach()
      this.showForwardFun()
    },
    beforeMount () {
      this.initQuickReplay()
      this.initSupportEmail()
    },
    beforeDestroy () {
      this.m7uploaders.forEach(uploader => {
        uploader &&
        uploader.destroy &&
        uploader.destroy()
      })
    }
  }
  function doQuerySysQuickReplyList (store, data) {
    return store.dispatch('queryEmailAllTagsForEmail', data)
  }
  function doQueryCustomQuickReplyList (store, data) {
    return store.dispatch('getQuickReplyListForEmail', data)
  }
  function getMailStatus (store, data) {
    return store.dispatch('getMailStatus', data)
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .el-form-item
    margin 0
  .quickreplay_custome_title
    padding 0 0 8px
    font-weight bold
    span
      float right
      font-size 12px
      line-height 20px
      cursor pointer
      margin-right 6px
  .quickreplay_li
    .edit_del
      position absolute
      right 4px
      top 0
  .quickRe
    display none
    color $c-main
    float right
    margin-right 4px
    cursor pointer
  .quickReLi
    width 100%
    position relative
    box-sizing border-box
    padding 2px 0 2px 20px
    color $cf-gray3
    height 22px
  .quickReLi:before
    content '\ '
    background $c-sub
    width 4px
    height 4px
    position absolute
    left 10px
    top 6px
  .quickReBox
    position absolute
    right 0
    top 0
  .quickReLi:hover
    padding-right 40px
    .quickRe
      display inline-block
  .quickreplay_custom
    position relative
  .quickreplay_custom_con
    li
      margin-bottom 4px
      position relative
  .quickreplay_custom_con
    li
      i
        line-height 16px
  .quickreplay_box
    padding 4px 16px
    color $cf-gray2
    .quickreplay_sys
      position relative
    .quickBoxTit
      padding 0 0 8px
      font-weight bold
    .tree
      padding-left 10px
      .quickReLi:before
        top 8px
    .el-tree
      .is-leaf
        display none
  .color
    color #1f2d3d
  .cursor_li
    cursor pointer
    height 22px
    line-height 22px
  .quickreplay_custom_edit
    .quickReplyCancel
      background $c-sub
      border 1px solid $c-sub
    .quickReplySave
      background $c-main
      border 1px solid $c-main
    .quickreplay_custom_edit_input
      border 1px solid #a9a9a9
      margin 0
  .button_box
    margin-top 10px
    text-align center
  .sys_quick_li
    position relative
    color $cf-gray1
    .sys_quick_li_span
      position absolute
      left 0
    .sys_quick_li_title
      display inline-block
      width 100%
      box-sizing border-box
      padding-left 20px
  #send_email_editor_content
    height 200px
  .color1
    color $c-pink
  .color2
    color $c-main
  .quickReBoxShow,.quickReBoxShowCustomer
    background #fff
    position absolute
    display inline-block
    width calc(100% - 16px)
    height auto
    left 10px
    padding-left 20px
    padding 2px 0 2px 20px
    top 0
    box-shadow 0 0 6px #000
    border-radius 5px
    box-sizing border-box
    color #000
    min-height 23px
    margin-bottom 4px
    z-index 2
    .cata-name
      word-break break-all
      white-space normal
      width 80%;
      display inline-block;
  .quickReBoxShowCustomer
    padding: 2px 0 2px 10px;
  .quickreplay_custome
    position relative
  .el-dialog
    max-height 300px
  .send_editor_box
    border 1px solid #a6a6a6
  .send_email_con
    height calc(100vh - 95px)
    overflow-y scroll
    border-right 1px solid #ccc
    box-sizing border-box
    padding 20px
  .form_item
    line-height 20px
    height 20px
    width 100%
    box-sizing border-box
    margin-top 10px
    border 1px solid #a6a6a6
  .send_btn_box
    height 40px
    border 1px solid #ccc
    border-width 1px 1px 0 0
    box-sizing border-box
    padding 4px 20px
    .support_email_selet
      width 200px
  .incidentalAgentInfo
    float right
    margin-right 6px
    line-height 28px
    color #a5a5a5
  .replyMsg
    float right
  .addAttach
    width 200px
    cursor pointer
  .verification_box_attach
    width 100%
    box-sizing border-box
    border 1px solid #e7e7e7
    border-radius 2px
    min-height 28px
    padding 4px 6px 0
    overflow-y auto
    background $cf-white
  input
    width 160px
    border none
    background transparent
    display inline-block
    vertical-align middle
    margin 0 4px 4px 0
  .verification_li
    background #D1F6F8
    position relative
    padding-right 16px
    float left
    line-height 18px
    margin 0 4px 4px 0
    .delete_email
      float left
      color $c-main
      font-size 12px
      position absolute
      line-height 20px
      right 3px
      top 0
      cursor pointer
    span
      color $cf-gray1
  .attach_upload_progress
    width 100px
    height 18px
    float left
    margin 0 4px 3px 0
    overflow hidden
    font-size 12px
    line-height 10px
  .progress_title,.progress_img
    display inline-block
    width 100%
    color $cf-level3
  .progress_title
    height 13px
    text-align center
  .progress_img
    background #bbb
    height 5px
    float left
    overflow hidden
  .progress_img_span
    height 10px
    float left
    background #1ABA9D
    display inline-block
  .verification_ul
    display block
    overflow-y auto
    max-height 42px
  .attach_box
    height 30px
    line-height 30px
  #uploadEmailAttach
    color #666
  .form_item_box
    margin 8px 0
  #send_email_editor_menu
    .w-e-toolbar, .w-e-menu
      height 26px
  .quickreplay_box
    height calc(100vh - 54px)
    overflow scroll
    box-sizing border-box
</style>
